"use client"
import React from 'react'
import { AudioOutlined } from '@ant-design/icons'
import { Input, Space } from 'antd'
import fetchUsers from '../util/actions/studentAction'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'

import { useDebouncedCallback } from "use-debounce";
const { Search } = Input


function SearchStudent({ placeholder }) {
    const { replace } = useRouter()
    const searchParams = useSearchParams()
    const pathname = usePathname()


    const handleSearch = useDebouncedCallback((e) => {
        //创建一个新的 URLSearchParams 对象，处理参数请求
        const params = new URLSearchParams(searchParams)
        console.log("params1===" + params)
        if (e.target.value) {
            params.set("q", `${e.target.value}`)
        } else {
            params.delete("q")
        }
        console.log("params2===" + params)
        console.log(`${pathname}?${params}`)
        // replace('${pathname}?${params}')  
        replace(`${pathname}?${params}`); //studentmanage?q=123
       
    }, 600)

    return (
        <div>
            <input type="text"
                autoComplete='off'
                placeholder={placeholder}
                onChange={handleSearch}
            />
        </div>
    )
}
export default SearchStudent